<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无人点单无人支付系统</title>		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link rel="stylesheet" type="text/css" href="css/basic.css"/>		
		<link rel="stylesheet" type="text/css" href="css/index.css"/>		   
		  
		  <script type="text/javascript">		  	
		  	
			  	window.onload=function(){
			  		
			  		//按钮
			  		var navCate=document.getElementById('nav_cate');
			  		//分类
			  		var leftCate=document.getElementById('left_cate');
			  		
			  		//背景			  		
			  		var bg=document.getElementById('bg');			  		
			  		
			  		var flag=true;
			  		
			  		bg.onclick=navCate.onclick=function(){
			  			
			  			if(flag){
			  				
			  				flag=false;
			  				leftCate.style.transform='translate(0,0)';
			  				
			  				bg.style.display='block';
			  				
			  			}else{	
			  				
			  				flag=true;
			  				leftCate.style.transform='translate(-100%,0)';
			  				
			  				bg.style.display='none';
			  			}
			  			
			  		}
			  		
			  		function getScrollTop(){ 
						var scrollTop=0; 
						if(document.documentElement&&document.documentElement.scrollTop){ 
							scrollTop=document.documentElement.scrollTop; 
						}else if(document.body){ 
							scrollTop=document.body.scrollTop; 
						} 
						return scrollTop; 
					} 
					
			  		
			  	}
		  </script>
	</head>
	<body>
		
		<header class="index_header">
			
			<div class="hlist">
				<img src="images/rexiao.png"/>
				<p>热销榜</p>				
			</div>
			
			<div class="hlist">
				<img src="images/caidan.png" />
				<p>点过的菜</p>				
			</div>
			<div class="hlist">
				
				<img src="images/sousuo.png"/>
				<p>搜你喜欢</p>				
			</div>
			
		</header>
		
		<aside class="left_cate" id="left_cate">
				<ul>
					<li>精品美食</li>
					
					<li>精品小面</li>
					
					<li>饮料酒水</li>
					
					<li>新品推荐</li>
					
					<li>舌尖美食</li>
					
					<li>厨师长推荐</li>
				</ul>
				
				<div id="nav_cate" class="nav_cate">
					<img src="images/nav.png"/>
					<p>菜单</p>
				</div>
				
				
		</aside>
		
		
		<div class="content">
			
			
			<div class="item">
				
				<h3 class="item_cate">皮蛋瘦肉粥</h3>
				
				<ul class="item_list">
					<li>	
						<div class="inner">
							<img src="images/1.jpg" />
							<p class="title">大蒜腊肉</p>						
							<p class="price">¥26</p>
						</div>		
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">家乡扣肉</p>
							
							<p class="price">¥26</p>	
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">酸辣土豆丝</p>
							
							<p class="price">¥26</p>
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">家乡腊肉</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">长沙臭豆腐</p>
							
							<p class="price">¥26</p>
						</div>				
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>					
						</div>	
					</li>
					
				</ul>
				
			</div>
			<div class="item">
				
				<h3 class="item_cate">皮蛋瘦肉粥</h3>
				
				<ul class="item_list">
					<li>	
						<div class="inner">
							<img src="images/1.jpg" />
							<p class="title">大蒜腊肉</p>						
							<p class="price">¥26</p>
						</div>		
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">家乡扣肉</p>
							
							<p class="price">¥26</p>	
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">酸辣土豆丝</p>
							
							<p class="price">¥26</p>
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">家乡腊肉</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">长沙臭豆腐</p>
							
							<p class="price">¥26</p>
						</div>				
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>					
						</div>	
					</li>
					
				</ul>
				
			</div>
			<div class="item">
				
				<h3 class="item_cate">皮蛋瘦肉粥</h3>
				
				<ul class="item_list">
					<li>	
						<div class="inner">
							<img src="images/1.jpg" />
							<p class="title">大蒜腊肉</p>						
							<p class="price">¥26</p>
						</div>		
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">家乡扣肉</p>
							
							<p class="price">¥26</p>	
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">酸辣土豆丝</p>
							
							<p class="price">¥26</p>
						</div>					
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">家乡腊肉</p>
							
							<p class="price">¥26</p>				
						</div>	
					</li>
					
					<li>
						<div class="inner">
							<img class="item_img" src="images/2.jpg" />
							
							<p class="title">长沙臭豆腐</p>
							
							<p class="price">¥26</p>
						</div>				
						
					</li>
					<li>
						<div class="inner">
							<img class="item_img" src="images/3.jpg" />
							
							<p class="title">主打鸡</p>
							
							<p class="price">¥26</p>					
						</div>	
					</li>
					
				</ul>
				
			</div>
		</div>
		
		<div class="bg" id="bg">
			
			
		</div>
		
	</body>
</html>
